<template>
    <div class="diaLogs">
        <el-dialog title="修改会员信息" center :before-close="cancel" :visible.sync="isShow">
            <el-form ref="diaLogs" :model="form" :rules="rules">
                <el-form-item prop="phone" label="手机号" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="nickname" label="昵称" :label-width="formLabelWidth">
                    <el-input v-model="form.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off"></el-input>
                    <p>留空则不修改</p>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="#13ce66" inactive-color="gray" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { memberinfo, memberedit } from "../../request/api"
import { mapActions } from "vuex"
export default {
    data() {
        return {
            form: {
                nickname: '',
                phone: '',
                password: '',
                status: 1
            },
            formLabelWidth: '120px',
            rules: {
                nickname: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度为 11 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    props: ["isShow"],
    mounted() {
    },
    methods: {
        ...mapActions({
            getvvipAction: 'vvip/getvvipAction'
        }),
        //隐藏
        cancel() {
            this.$emit('cancel')
            this.reset()
        },
        //reset
        reset() {
            this.form = {
                nickname: '',
                phone: '',
                status: 1
            }
            this.$refs.diaLogs.resetFields()
        },
        //信息回显
        lookup(uid) {
            memberinfo({ uid }).then(res => {
                if (res.code == 200) {
                    this.form = res.list
                    this.form.uid = uid
                    this.form.password = ''
                }
            })
        },
        //确定提交
        confirm() {
            this.$refs.diaLogs.validate((val) => {
                if (val) {
                    memberedit(this.form).then(res => {
                        if (res.code == 200) {
                            this.$message.success(res.msg)
                            // console.log(this.form);
                            //关闭弹窗
                            this.cancel()
                            //重新调用数据列表
                            this.getvvipAction()

                        }
                    }).catch(res => {
                        this.$message.error(res.msg)
                    })
                }
            })

        }

    }
}
</script>
<style scoped></style>